import {
  AbstractImage,
  CategoryTag,
  Icon,
  PriceView,
  WrappingText,
} from "@/components";
import { View, ViewProps } from "@tarojs/components";
import { AbstractImageTypes } from "../AbstractImage";
import style from "./index.module.scss";

export type ImageCardTypes =
  | `course-card${"-tall" | ""}`
  | `product-card${"-tag" | "-short" | ""}`
  | "talklisting-card"
  | "recommendation-mixed"
  | "exhibition-listing-card"
  | `vertical-list-card${"-spread" | "-center" | ""}`;

export interface ImageTextCardProps extends ViewProps {
  imagePath: string;
  title: string;
  tag?: string;
  infoField?: {
    text: string;
    color: string;
  } | null;
  clickIndication?: boolean;
  themeColor?: string;
  cost?: number;
  dateRange?: string;
  date?: {
    date?: `${string}.${string}.${string}` | string;
    time?:
    | `${string}:${string}${"AM" | "PM"} - ${string}:${string}${"AM" | "PM"}`
    | string;
  } | null;
  location?: string;
  type: ImageCardTypes; // exhibition card variant with location may be combined, not listed
  priceAtBottom?: boolean;
  waitingListAvailableText?: string | null;
}

const DEFAULT_IMAGE_TYPE = "none";

const IMAGE_TYPE_LOOKUP: { [key in ImageCardTypes]?: AbstractImageTypes } = {
  "course-card": "corner-cut-card-usage-default",
};

const ImageTextCard = ({
  imagePath,
  title,
  tag,
  infoField,
  clickIndication = false,
  themeColor,
  cost,
  dateRange,
  date,
  location,
  type,
  priceAtBottom = false,
  waitingListAvailableText = null,
  ...props
}: ImageTextCardProps) => {
  return (
    <View
      className={`${style["card-wrapper"]} ${style[`card-wrapper-${type}`]}`}
      {...props}
    >
      <AbstractImage
        className={style.image}
        src={imagePath}
        type={IMAGE_TYPE_LOOKUP[type] ?? DEFAULT_IMAGE_TYPE}
      />

      <View className={style["card-copy"]}>
        {(tag || infoField) && (
          <View className={style["card-tag-info-container"]}>
            {tag && (
              <View className={style["card-tag"]}>
                <CategoryTag
                  categoryName={tag}
                  themeColor={themeColor}
                  size="small"
                />
              </View>
            )}
            {infoField && (
              <WrappingText
                color={infoField.color}
                className={style["card-info"]}
              >
                {infoField.text}
              </WrappingText>
            )}
            {clickIndication && (
              <View className={style["click-indication"]}>
                <View className={style["link-text"]}>点击进入</View>
                <Icon
                  type="GoToChevronViking"
                  className={style["chevron-viking"]}
                />
              </View>
            )}
          </View>
        )}
        <WrappingText className={style["card-title"]}>{title}</WrappingText>
        {typeof cost !== "undefined" && !priceAtBottom && (
          <PriceView
            className={style["card-price"]}
            type="small"
            price={cost}
          />
        )}
        {location && (
          <View className={style["card-location"]}>
            <Icon type="LocationGold" className={style["location-icon"]} />
            {location}
          </View>
        )}
        {dateRange && (
          <View className={style["date-range"]} style={{ color: themeColor }}>
            {dateRange}
          </View>
        )}
        {date && (
          <View className={style.date}>
            {type === "course-card-tall" ? (
              <>
                {date.date && (
                  <View className={style["date-left"]}>下一堂:</View>
                )}
                <View className={style["date-right"]}>
                  {date.date && <View>{date.date}</View>}
                  <View>{date.time}</View>
                </View>
              </>
            ) : (
              <>
                {date.date && <View>{date.date}</View>}
                {date.time && <View>{date.time}</View>}
              </>
            )}
          </View>
        )}
        {waitingListAvailableText && (
          <View className={style["waiting-list-text"]}>
            {waitingListAvailableText}
          </View>
        )}

        {typeof cost !== "undefined" && priceAtBottom && (
          <PriceView
            className={style["card-price"]}
            type="small"
            price={cost}
          />
        )}
      </View>
    </View>
  );
};

export default ImageTextCard;
